<template>
  <div id="con">
    <button id="dsBut" @click="DrawerStzte = !DrawerStzte">
      打赏博主
      <div class="star-1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="25"
          height="25"
        >
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="20"
          height="20"
        >
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="9"
          height="9"
        >
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="10"
          height="10"
        >
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
      <div class="star-6">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="7"
          height="7"
        >
          <path
            fill="#fd1853"
            d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087
    c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103
    c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103
    C475.116,213.899,475.116,136.489,427.313,88.686z"
          ></path>
        </svg>
      </div>
    </button>

    <div id="tube-con">
      <svg
        viewBox="0 0 1028 385"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 77H234.226L307.006 24H790"
          stroke="#e5e9ef"
          stroke-width="20"
        />
        <path
          d="M0 140H233.035L329.72 71H1028"
          stroke="#e5e9ef"
          stroke-width="20"
        />
        <path
          d="M1 255H234.226L307.006 307H790"
          stroke="#e5e9ef"
          stroke-width="20"
        />
        <path
          d="M0 305H233.035L329.72 375H1028"
          stroke="#e5e9ef"
          stroke-width="20"
        />
        <rect y="186" width="236" height="24" fill="#e5e9ef" />
        <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
        <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
        <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
      </svg>
      <div id="mask">
        <svg
          viewBox="0 0 1028 385"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 77H234.226L307.006 24H790"
            stroke="#f25d8e"
            stroke-width="20"
          />
          <path
            d="M0 140H233.035L329.72 71H1028"
            stroke="#f25d8e"
            stroke-width="20"
          />
          <path
            d="M1 255H234.226L307.006 307H790"
            stroke="#f25d8e"
            stroke-width="20"
          />
          <path
            d="M0 305H233.035L329.72 375H1028"
            stroke="#f25d8e"
            stroke-width="20"
          />
          <rect y="186" width="236" height="24" fill="#f25d8e" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
          <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
          <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
        </svg>
      </div>
      <div id="orange-mask">
        <svg
          viewBox="0 0 1028 385"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 77H234.226L307.006 24H790"
            stroke="#ffd52b"
            stroke-width="20"
          />
          <path
            d="M0 140H233.035L329.72 71H1028"
            stroke="#ffd52b"
            stroke-width="20"
          />
          <path
            d="M1 255H234.226L307.006 307H790"
            stroke="#ffd52b"
            stroke-width="20"
          />
          <path
            d="M0 305H233.035L329.72 375H1028"
            stroke="#ffd52b"
            stroke-width="20"
          />
          <rect y="186" width="236" height="24" fill="#ffd52b" />
          <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
          <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
          <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
          <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
        </svg>
      </div>
      <p id="people">
        共
        <b v-if="variable.begData.value">{{ variable.begData.value.total }}</b>
        人
      </p>
    </div>
  </div>

  <Modal
    v-model="DrawerStzte"
    :styles="{ top: '200px' }"
    :footer-hide="true"
    :lock-scroll="false"
    :closable="false"
  >
    <h3>感谢您的支持，支付时请留下姓名或昵称，我会把您的昵称显示在页面。</h3>
    <div style="display: flex; justify-content: space-around; padding: 20px">
      <Image src="/pay/wx.png" width="40%" />
      <Image src="/pay/zfb.png" width="40%" />
    </div>
    <div style="display: flex; justify-content: center">
      <Button
        shape="circle"
        icon="md-close"
        size="large"
        style="font-size: 32px; width: 50px; height: 50px"
        @click="DrawerStzte = !DrawerStzte"
      ></Button>
    </div>
  </Modal>
</template>
<script setup>
const axios = inject("axios");
import variable from "../../js/variable";

const DrawerStzte = ref(false); //打赏-弹出层状态

// 查询打赏名单
function findBeg() {
  axios
    .post("beg/findBeg", { pageSize: 999 })
    .then((response) => {
      let res = response.data;
      if (res.msg == "成功") {
        variable.begData.value = res.data;
      }
    })
    .catch();
}
onMounted(() => {
  findBeg();
});
</script>
<style  scoped>
/* 设置容器 */
#con {
  width: 285px;
  height: 85px;
  position: relative;
  display: flex;
  align-items: center;
}

/* 设置文本居中容器 */
#text-con {
  width: 100px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

/* 做一个小闪电 */
#linght {
  width: 0;
  height: 0;
  position: absolute;
  top: 36%;
  left: 4px;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 10px solid #fff;
  border-radius: 4px;
  transform: rotate(-55deg);
}

#linght::after {
  position: absolute;
  top: -13px;
  left: -11px;
  content: "";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 10px solid #fff;
  transform: rotate(180deg);
  border-radius: 4px;
}

/* 文字 */
#TA {
  float: right;
  line-height: 50px;
  font-size: 15px;
  color: #fff;
}

/* 创建图形容器 */
#tube-con {
  width: 157px;
  height: 55px;
  position: absolute;
  right: -5px;
  top: 15px;
}

/* 对svg图形设置宽高 */
svg {
  width: 100%;
  height: 100%;
}

/* 创建一个蒙版 宽度为0，当我hover充电框的时候，宽度展开 */
#mask {
  width: 0px;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
}

/* 对蒙版的sbg单独设置宽高，保证宽度高低有一个固定值而不是百分比 */
#mask svg {
  width: 157px;
  height: 55px;
}

/* 对充电框hover的时候开始动画，将粉色线条铺开 */
#dsBut:hover + #tube-con > #mask {
  width: 157px;
}

/* 对充电框hover的时候开始动画，添加黄色快速移动的动画 */
#dsBut:hover + #tube-con > #orange-mask {
  animation: move1 0.5s linear 0.2s infinite;
}

#dsBut:hover + #tube-con > #orange-mask svg {
  animation: movetwo 0.5s linear 0.2s infinite;
}

/* 创建黄色移动的蒙版 */
#orange-mask {
  width: 18px;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: -15px;
  top: 0px;
}

/* 创建黄色移动的内容 */
#orange-mask svg {
  position: absolute;
  top: 0;
  left: 15px;
  width: 157px;
  height: 55px;
}

@keyframes move1 {
  0% {
    left: -15px;
  }

  100% {
    left: 140px;
  }
}

@keyframes movetwo {
  0% {
    left: 15px;
  }

  100% {
    left: -140px;
  }
}

#people {
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 12px;
  font-family: "雅黑";
  color: #aaa;
}

#people > b {
  color: #777;
}

.verticalModal {
  background-color: #fff;
}

@media (max-width: 800px) {
  #tube-con {
    display: none;
  }
}

/* 对充电框hover的时候开始动画，将粉色线条铺开 */
#dsBut:hover + #tube-con > #mask {
  width: 157px;
}

/* 对充电框hover的时候开始动画，添加黄色快速移动的动画 */
#dsBut:hover + #tube-con > #orange-mask {
  animation: move1 0.5s linear 0.2s infinite;
}

#dsBut:hover + #tube-con > #orange-mask svg {
  animation: movetwo 0.5s linear 0.2s infinite;
}

/* ----------------------按钮特效爱心------------------------- */
#dsBut {
  background: linear-gradient(
    45deg,
    transparent 27%,
    #f25d8e 5%,
    #f25d8e 73%,
    transparent 27%
  );
  box-shadow: 6px 0px 0px #00e6f6;
  position: relative;
  padding: 10px 35px;
  font-size: 15px;
  font-weight: 500;
  color: white;
  border: 3px solid #00e6f6;
  border-radius: 8px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all 0.3s ease-in-out;
  /* background-color: #f25d8e; */
  cursor: pointer;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #fd1853);
  z-index: -5;
  transition: all 0.8s ease;
}

#dsBut:hover {
  background: transparent;
  color: #00e6f6;
  box-shadow: 0 0 50px #fd1853;
}

#dsBut:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

#dsBut:hover .star-2 {
  position: absolute;
  top: -25%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

#dsBut:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

#dsBut:hover .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

#dsBut:hover .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px #fd1853);
  z-index: 2;
}

.fil0 {
  fill: #fd1853;
}
/* ----------------------按钮特效爱心结束------------------------- */
</style>